<template>
  <div class="WeeklySchedule">
    <div class="Headline-Title">
      <div><slot name="Title"></slot></div>
      <div
        v-for="(item, ind) in weekData"
        :key="item.value"
        :class="isGreaterTime(ind) ? '' : 'Disabled-State'"
      >
        {{ item.name }}
        <span class="Date">{{ getMonthDay(ind) }}</span>
        <span v-show="isToday(ind)">(今日)</span>
      </div>
    </div>
    <el-scrollbar class="ElScrollbar" wrap-style="overflow-x:hidden;">
      <div class="Data-Container" v-for="(item, ind) in DataVal" :key="item.id">
        <div>{{ item.name }}</div>
        <div
          v-for="(i, index) in weekData"
          :key="i.value"
          :class="isGreaterTime(index) ? '' : 'Disabled-State'"
        >
          <!-- 悬浮按钮 -->
          <div
            :class="0 == ind ? 'addBut' : 'addBut lastList'"
            v-if="isGreaterTime(index)"
          >
            <el-button size="default" @click="reserve(item, ind, i)"
              >预留</el-button
            >
            <el-button
              class="addSchedule"
              size="default"
              type="primary"
              @click="addSchedules(item, ind, i)"
              >添加排班</el-button
            >
          </div>
          <!-- 内容区域 -->
          <div class="Daily-Tasks" v-if="item[i.value].length > 0">
            <template v-for="el in item[i.value]" :key="el.id">
              <p>{{ el.scheduleClassesName }}</p>
              <span v-if="el.serviceConfigs.length > 0">
                <span v-for="element in el.serviceConfigs" :key="element.id"
                  >{{ element.scheduleServiceName }}、</span
                >
              </span>
              <span v-else class="notHave">无</span>
            </template>
          </div>
          <div class="Placeholder" v-else>\</div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const weekData = ref([
  {
    name: "周一",
    value: "MondayData",
  },
  {
    name: "周二",
    value: "TuesdayData",
  },
  {
    name: "周三",
    value: "WednesdayData",
  },
  {
    name: "周四",
    value: "ThursdayData",
  },
  {
    name: "周五",
    value: "FridayData",
  },
  {
    name: "周六",
    value: "SaturdayData",
  },
  {
    name: "周日",
    value: "SundayData",
  },
]);

const props = defineProps({
  DateVal: {
    type: [String, Date],
    default: () => {
      return new Date();
    },
  },
  DataVal: {
    type: Array,
    default: [],
  },
});

const emit = defineEmits(["reserve", "addSchedules"]);

function reserve(item, index, week) {
  emit("reserve", item, index, week);
}

function addSchedules(item, index, week) {
  emit("addSchedules", item, index, week);
}

function getMonthDay(ind) {
  //转换格式显示在title里  例如 1.20
  let startVal = new Date(getWeekStartAndEnd(props.DateVal).start);
  startVal.setDate(startVal.getDate() + ind);
  startVal = formatDate(startVal);
  const month = Number(startVal.split("-")[1]).toString();
  const day = Number(startVal.split("-")[2]).toString();
  return `${month}.${day}`;
}

function isToday(ind) {
  //判断title里的日期是否是今日
  let startVal = new Date(getWeekStartAndEnd(props.DateVal).start);
  startVal.setDate(startVal.getDate() + ind);
  const date = new Date();
  return formatDate(date) == formatDate(startVal);
}

function isGreaterTime(ind) {
  //判断title里的日期是大于等于今日
  let startVal = new Date(getWeekStartAndEnd(props.DateVal).start);
  startVal.setDate(startVal.getDate() + ind);
  const date = new Date();
  return formatDate(date) <= formatDate(startVal);
}

function getWeekStartAndEnd(data) {
  const now = new Date(data);
  const dayOfWeek = now.getDay();
  const sunday = new Date(now);
  const monday = new Date(now);
  if (dayOfWeek == 0) {
    // 获取本周一（0代表周日，1-6代表周一到周六）  周日为最后一天  则开始日期 - 6
    monday.setDate(monday.getDate() - dayOfWeek - 6);
    // 获取本周日
    sunday.setDate(sunday.getDate() - dayOfWeek);
  } else {
    monday.setDate(monday.getDate() - dayOfWeek + 1);
    sunday.setDate(sunday.getDate() - dayOfWeek + 7);
  }
  return {
    start: formatDate(monday),
    end: formatDate(sunday),
  };
}

// 格式化日期为YYYY-MM-DD
function formatDate(date) {
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
</script>

<style scoped lang="scss">
.WeeklySchedule {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ebeef5;

  .Headline-Title {
    background: #f9fbfc;
    color: #000000;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #ebeef5;
    display: flex;

    > div {
      width: 12.5%;
      min-width: 160px;
      height: 45px;
      line-height: 45px;
      border-right: 1px solid #ebeef5;
      text-align: center;

      .Date {
        padding: 1.5px 0;
      }

      span {
        padding-left: 6px !important;
      }
    }

    > div:last-child {
      border-right: none;
    }
  }

  .ElScrollbar {
    height: calc(100% - 45px);
  }

  .Data-Container {
    width: 100%;
    height: auto;
    min-width: 160px;
    min-height: 160px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    background-color: #ffffff;

    > div {
      width: 12.5%;
      min-width: 160px;
      height: auto;
      padding: 15px;
      line-height: 25px;
      border-right: 1px solid #ebeef5;
      position: relative;
    }

    .addBut {
      position: absolute;
      z-index: 99;
      bottom: -32px;
      left: 0;
      display: none;
      width: 100%;

      button {
        width: calc(41% - 5px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
      }

      .addSchedule {
        width: calc(59% - 5px) !important;
        margin-left: 10px !important;
      }
    }

    .lastList {
      top: -32px !important;
      bottom: 0;

      button {
        box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.12) !important;
      }
    }

    > div:hover {
      background: #f9fbfc;
      cursor: pointer;

      .addBut {
        display: block;
      }
    }

    > div:first-child {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    > div:last-child {
      border-right: none;
    }

    .Daily-Tasks {
      font-size: 14px;

      p {
        color: #1989fa;
        margin: 0;
        padding: 5px 0;
      }

      span {
        color: #606266;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        word-wrap: break-word; /* 旧版浏览器支持 */
        overflow-wrap: break-word; /* 标准属性 */
      }

      .notHave {
        opacity: 0.4;
      }
    }

    .Placeholder {
      height: 100%;
      opacity: 0.4;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.Disabled-State {
  background: #f9fbfc !important;
  cursor: default !important;
  opacity: 0.6;
}

:deep() {
  .is-horizontal {
    /* 隐藏横向滚动条 */
    display: none !important;
  }
}
</style>
